<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="handleBack"><i class="zmdi zmdi-arrow-left"></i>&nbsp;&nbsp;返回</el-button>
          <el-button v-if="!isLoading" type="success" @click="onSubmit"><i class="zmdi zmdi-save"></i>&nbsp;&nbsp;保存</el-button>
          <el-button type="text" :loading="isLoading"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-form ref="form" :model="curObject" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="拥有者ID">
              <el-input v-model="curObject.uid"></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input v-model="curObject.name"></el-input>
            </el-form-item>
            <el-form-item label="类别">
              <el-select v-model="curObject.type_id" :loading="initTypeList" style="width: 100%;">
                <el-option v-for="option in typeList" :label="option.name" :value="option.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="开始日期" v-model="curObject.start_time" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col style="text-align: center" :span="2">至</el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="结束日期" v-model="curObject.end_time" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="报名时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="开始日期" v-model="curObject.bm_start" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col style="text-align: center" :span="2">至</el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="结束日期" v-model="curObject.bm_end" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拥有者姓名">
              <el-input v-model="curObject.uname"></el-input>
            </el-form-item>
            <el-form-item label="主题图片">
              <el-input v-model="curObject.title_image"></el-input>
              <el-upload class="uploader" action="wcjy_api/file/index/upload" :show-file-list="false" :on-success="handleUploadScucess" :before-upload="handleUploadBefore" :on-error="handleUploadError">
                <img v-if="curObject.title_image" :src="curObject.title_image" class="titleImage">
                <i v-else class="el-icon-plus uploader-icon">添加图片</i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动地区">
              <el-input v-model="curObject.area"></el-input>
            </el-form-item>
            <el-form-item label="最多人数">
              <el-input v-model="curObject.people_limit "></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动地点">
              <el-input v-model="curObject.address"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="curObject.price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="活动内容">
          <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" v-model="curObject.content"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import API from '../../api'
  import utils from '../../utils'

  var message = ''

  export default {
    data: function () {
      return {
        typeList: [],
        initTypeList: true,
        fileList: [],
        curId: '',
        curObject: {},
        isLoading: false
      }
    },

    created: function () {
      this.initSelectType()
      this.curId = this.$route.params.id
      if (this.curId === '0') {
        this.curObject = {
          id: 0,
          name: '',
          uid: '',
          uname: '',
          start_time: '',
          end_time: '',
          bm_start: '',
          bm_end: '',
          address: '',
          content: '',
          price: '',
          people_limit: '',
          area: '',
          type_id: '',
          title_image: ''
        }
        var breadcrumbs = []
        breadcrumbs.push({
          index: '',
          name: '新增活动'
        })
        this.$store.dispatch('updateBreadcrumb', breadcrumbs)
      } else {
        this.fetchData()
      }
    },

    methods: {
      handleBack: function () {
        var p = this.$store.state.home.breadcrumb_data
        if (p.length > 1) {
          p = p[p.length - 2]
          this.$router.replace(p.index)
        } else {
          this.$router.replace('/activity/list')
        }
      },
      handleUploadBefore: function (file) {
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('不能超过 2MB!')
        }
        message = this.$message({
          duration: 0,
          message: '正在上传数据……',
          iconClass: 'zmdi zmdi-spinner icon-spin'
        })
        return isLt2M
      },
      handleUploadError: function () {
        if (message) {
          message.close()
          message = ''
        }
        this.$message.error('上传文件失败')
      },
      handleUploadScucess: function (response, file) {
        this.curObject.title_image = response.data.path
        if (message) {
          message.close()
          message = ''
        }
      },
      onSubmit: function () {
        for (var i = 0, len = this.typeList.length; i < len; i++) {
          if (this.typeList[i].id === this.curObject.type_id) {
            this.curObject.type_name = this.typeList[i].name
          }
        }
        this.curObject.start_time = utils.date.format(this.curObject.start_time)
        this.curObject.end_time = utils.date.format(this.curObject.end_time)
        this.curObject.bm_start = utils.date.format(this.curObject.bm_start)
        this.curObject.bm_end = utils.date.format(this.curObject.bm_end)
        this.curObject.image = this.curObject.title_image

        this.isLoading = true
        API.activitySave(this.curObject, (data) => {
          this.isLoading = false
          if (!data) return
          this.handleBack()
        })
      },

      fetchData: function () {
        this.isLoading = true
        var params = { 'id': this.curId }
        API.activityInfo(params,
          (data) => {
            this.isLoading = false
            if (!data) return
            this.curObject = data
            this.curObject.title_image = this.curObject.image
            var breadcrumbs = []
            breadcrumbs.push({
              index: '/activity/list/info/' + this.curId,
              name: data.name
            })
            breadcrumbs.push({
              index: this.$route.path,
              name: '活动编辑'
            })
            this.$store.dispatch('updateBreadcrumb', breadcrumbs)
          }
        )
      },
      initSelectType: function () {
        API.activityTypeList((data) => {
          this.initTypeList = false
          if (data) {
            this.typeList = data
          }
        })
      }
    },

    beforeRouteLeave: function (to, from, next) {
      this.$store.dispatch('updateBreadcrumb', [])
      next()
    }
  }

</script>

<style scoped>
  .card-body {
    max-width: 1000px;
    min-width: 560px;
  }

  .titleImage {
    height: 156px;
    width: 236px;
  }

  .uploader {
    margin-top: 10px;
    height: 160px;
    width: 240px;
    border-radius: 3px;
    border: 2px solid #eee;
    text-align: center;
    color: #4db3ff;
  }

  .uploader:hover {
    border: 2px solid #4db3ff;
    cursor: pointer;
  }

  .uploader-icon {
    margin-top: 65px;
    font-size: 30px;
  }

</style>
